<template>
	<div style="position: relative;width: 750rpx;">
		<uni-transition ref="transition" :styles="{'width':'750rpx','height':'150rpx'}" :show="show" :duration="800" :mode-class="modeClass">
			<view class="big_box">
				<view class="donghua_box">
					<!-- <view class="avatar">
						<image :src="avatar" mode="" class="avatar_img"></image>
					</view> -->
					<view class="center">
						<view class="avatar_name">
							<text class="avatar_tag"></text>
							<text class="name">{{name}}</text>
						</view>
						<text class="song">正在去购买【{{song_name}}】</text>
					</view>
				</view>
			</view>
			<view class="liwu_box">
				<image class="liwu_img" :src="liwu_img" mode=""></image>
				<uni-transition ref="shuzi" :duration="100" :show="true">
					<!-- <text class="liwu_num">×{{num}}</text> -->
				</uni-transition>
			</view>
		</uni-transition>
	</div>
</template>

<script>
	export default {
		props: {
			// 头像
			avatar: {
				type: String,
				default: ''
			},
			// 名称
			name: {
				type: String,
				default: ''
			},
			// 接收人名称
			song_name: {
				type: String,
				default: ''
			},
			// 礼物图片
			// liwu_img: {
			// 	type: String,
			// 	default: ''
			// },
			// 数量
			// num: {
			// 	type: Number || String,
			// 	default: 1
			// },
			// 默认左侧出来
			modeClass: {
				type: String,
				default: 'slide-left'
			},
		},
		data() {
			return {
				show: false,
				timeID: null,
				StopTimeID: null,
				continuityTimeID: null,
			}
		},
		created() {
			this.$nextTick(() => {
				this.onCreated()
			})
		},
		mounted() {

		},
		methods: {
			onCreated() {
				this.show = true
				this.$emit("onCreated")
				console.log(this.timeID);
				if (this.timeID) clearTimeout(this.timeID)
				this.timeID = setTimeout(() => {
					this.onStop()
;				}, 3800)

			},
			set_liansong() {
				if (!this.continuityTimeID) {
					this.continuityTimeID = setTimeout(() => {
						this.set_daxiao_num()
						this.onCreated()
						this.continuityTimeID = null
					}, 70)
				}
			},
			set_daxiao_num() {
				this.$refs.shuzi.step({
					scale: [0.7, 0.7]
				}, {
					duration: 20,
				})
				this.$refs.shuzi.step({
					scale: [1, 1]
				}, {
					delay: 20,
					duration: 50
				})
				this.$refs.shuzi.run()
			},
			onStop() {
				this.show = false
				if (this.StopTimeID) clearTimeout(this.StopTimeID)
				this.StopTimeID = setTimeout(() => {
					this.$emit("onStop")
				}, 800)

			},
		}
	}
</script>

<style>
	.donghua_box{
		background-color: #727272;
		padding:10rpx;
		width: 500rpx;
		border-radius:20rpx;
		margin-left:20rpx;
	}
	.avatar_name{
		display: flex;
		flex-direction: row;
		margin-left:20rpx;
	}
	.avatar_tag{
		width:10rpx;
		height:30rpx;
		background:#f00;
		margin-right:10rpx;
	}
	.name{
		color: #fff;
		font-size: 24rpx;
		font-weight: bold;
		height:40rpx;
	}
	.song{
		margin-left:20rpx;
		color:#fff;
		font-size: 24rpx;
	}
</style>
